<template>
  <div class="about" style="height: 100%;">
    <el-row>
      <el-col :span="12" style="height: 400px">
        <v-chart :option="barOption"/>
      </el-col>
      <el-col :span="12" style="height: 400px">
        <v-chart :option="pieOption"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'AboutView',
  data () {
    return {
      pieOption: {
        title: { /* 标题设置 */
          text: '图书分类占比图', /* 设置标题内容 */
          subtext: '实时数据', /* 副标题 */
          left: 'center'/* 标题组件左侧的偏移量，可以设置具体的数字表示具体的px值，也可以是百分比，或者css支持的位置单词 */
        },
        tooltip: { /* 提示框设置 */
          trigger: 'item', /* 触发方式，可选值为axis(一般用在折线图中,表示在坐标轴上触发)和item(一般用在没有坐标的图例中，表示在数据上触发) */
          formatter: '{a}<br/>{b}:{c}({d}%)'/* 格式化输出内容模板：a表示图标名称，b表示触发项的名称，c表述该项的数据值，d表示百分比 */
        },
        legend: { /* 图例设置 */
          orient: 'vertical', /* 设置图例的布局方式，vertical表示垂直，horizontal表示水平方向展示 */
          left: 'left'
        },
        series: [/* 图标设置 */
          {
            name: '图书分类', /* 图标名称，和标题是有区别的 */
            type: 'pie', /* 设置图标类型，可选值很多 */
            radius: '50%', /* 设置半径 */
            data: [
              { name: '武侠', value: 22 },
              { name: '穿越', value: 18 },
              { name: '爱情', value: 6 },
              { name: '搞笑', value: 60 }
            ]
          }
        ]
      },
      barOption: {
        title: {
          text: '作者图数量总结',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category', /* 类目 */
          data: ['南派三叔', '刘慈欣', '张三', '李四']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'bar',
          data: [22, 20, 33, 7]
        }]
      }
    }
  },
  methods: {
    getData () {
      this.$http.get('echarts').then(data => {
        if (data) {
          const barNameArr = data.authorList.map(item => item.name)
          const barValueArr = data.authorList.map(item => item.count)
          let names = []
          let values = []
          let count = 0
          if (barNameArr.length > 5) {
            for (let i = 0; i < barNameArr.length; i++) {
              if (i < 5) {
                names[i] = barNameArr[i]
                values[i] = barValueArr[i]
              } else {
                count += barValueArr[i]
              }
            }
            names[5] = '其他'
            values[5] = count
          } else {
            names = [...barNameArr]
            values = [...barValueArr]
          }
          this.barOption.xAxis.data = [...names]
          this.barOption.series[0].data = [...values]
          const pieArr = data.categoryList.map(item => {
            return {
              name: item.name,
              value: item.count
            }
          })
          let pieData = []
          let pieCount = 0
          if (pieArr.length > 5) {
            for (let i = 0; i < pieArr.length; i++) {
              if (i < 5) {
                pieData[i] = pieArr[i]
              } else {
                pieCount += pieArr[i].value
              }
            }
            pieData[5] = {
              name: '其他',
              value: pieCount
            }
          } else {
            pieData = [...pieArr]
          }
          this.pieOption.series[0].data = [...pieData]
        }
      }).catch(() => {})
    }
  },
  created () {
    this.getData()
  }
}
</script>
